<!--展示某一个类别的一些游戏，并通过子组件BasePayPage展示某个游戏的所有可购买规格
    此工具组件需要5个值：
        allGames：第1个是筛选过的游戏数据，
        allGameSpecification：第2个是未处理所有的可展示在c端的游戏规格数据，
        gameCategory：第3个是当前的游戏类别数据，
        others：第4个是others杂项数据，
        gameSize：第5个是要展示的游戏数量-->
<template>
    <div>
        <el-col :span="6" v-for="game in allGames.slice(0,gameSize)" :key="game.id">
            《{{game.fullName}}》<br/><br/><br/>
            <el-card :body-style="{ padding: '6px' }" v-if="gameSpecificationShow(game.id).length!==0" style="height: 343px;">
                <span>
                    {{gameSpecificationTransition(gameSpecificationShow(game.id)[0].specification)}}
                </span>
                <br><br>
                <el-image
                    style="width: 300px; height: 180px"
                    :src="gameSpecificationShow(game.id)[0].gamePhoto"
                    :preview-src-list="[gameSpecificationShow(game.id)[0].gamePhoto]"
                    fit="fill">
                </el-image>
                <div style="padding: 14px;">
                    <div class="bottom clearfix">
                        <time class="time" v-if="gameCategory.id===others.categoryId" style="color: red;">
                            ❌原价：{{gameSpecificationShow(game.id)[0].gameValue}}$
                            <br><br>
                        </time>
                        <time class="time" style="color: green;">
                            ✔现价：{{getRealValue(gameSpecificationShow(game.id)[0].gameValue,gameCategory.id)}}$
                        </time>
                        <br><br>
                        <BasePayPage :game="game" :allGameSpecification="allGameSpecification" :others="others"></BasePayPage>
                    </div>
                </div>
            </el-card>
            <el-card :body-style="{ padding: '6px' }" v-else  style="height: 343px;">
                <el-avatar shape="square" :size="200">该游戏的所有版本均已售罄<i class="el-icon-loading"></i></el-avatar>  
            </el-card>
            <el-divider><i class="el-icon-s-promotion"></i></el-divider>
        </el-col> 
    </div>
</template>
<script>
import BasePayPage from './BasePayPage';
export default {
    components: {BasePayPage},
    props:['allGames','allGameSpecification','gameCategory','others','gameSize'],
    methods:{
        gameSpecificationShow(gameId){//通过游戏id筛选出该游戏所有的规格（这是里是要第一个规格和判断该游戏是否有可用的规格）
            var showgamespecification=[];
            this.allGameSpecification.forEach((gameSpecification)=>{
                if(gameId===gameSpecification.gameId){
                    showgamespecification.push(gameSpecification);
                }
            })
            return showgamespecification;
        },
        gameSpecificationTransition(val){//转换游戏的具体规格名
            if(val==='T'){
                return "标准版";
            }else if(val==='S'){
                return "导剪版";
            }else if(val==='G'){
                return "黄金版";
            }else if(val==='L'){
                return "终极版";
            }
        },
        getRealValue(val,id){//处理折扣金额
            if(id===this.others.categoryId){
                return (this.others.discount*val).toFixed(2);
            }
            return val;
        },
    },
}
</script>
<style scoped>
</style>